<template>
    <div class="Content">
        <template v-for="(item, index) in Layout" :key="'Layout' + index">
            <div class="Item" v-if="innerTypes.includes(item.value) && CellMapping[item.value]?.length" :style="{
                padding: token.padding + 'px',
                paddingBottom: '0px',
                color: token.colorTextSecondary,
            }">
                <div class="ItemTitle" :style="{
                    fontSize: token.fontSize,
                    paddingBottom: token.paddingXS + 'px',
                }">{{ item.label }}</div>
                <a-row :gutter="8">
                    <a-col class="ItemBox" v-for="(col, index) in CellMapping[item.value]"
                        :key="item.value + '' + index" :span="12">
                        <div class="CellItem" :style="{
                            borderColor: token.colorBorder,
                            borderRadius: token.borderRadiusSM + 'px',
                            padding: token.paddingXXS + 'px',
                        }" @mousedown="mousedown($event, col)">
                            <span class="C-Icon" :style="{ color: token.colorTextTertiary }"
                                v-html="col.Rule.icon"></span>
                            <span>{{ col.Rule.name }}</span>
                        </div>
                    </a-col>
                </a-row>
            </div>
        </template>
    </div>
</template>

<script setup>

import { computed, inject, ref } from "vue";

import { theme } from 'ant-design-vue';
const { token } = theme.useToken();
const StateEvent = inject('StateEvent');

const innerTypes = inject('VisualEditor-Core.DocumentEditor.Menu', ['Layout', 'Basis', 'Form', 'Report', 'Word', 'Expert'])

const Layout = ref([
    { label: '布局', value: 'Layout' },
    { label: '基础', value: 'Basis' },
    { label: '表单', value: 'Form' },
    { label: '文档', value: 'Word' },
    { label: '报表', value: 'Report' },
    { label: '高级', value: 'Expert' },
])

const CellMapping = computed(() => {
    var Data = {};
    for (const key in StateEvent.Rules) {
        const element = StateEvent.Rules[key];
        var CellType = key.split('-')[0];
        if (!Data[CellType]) {
            Data[CellType] = []
        };
        if (element.Rule.CellMenuHide !== false) {
            Data[CellType].push(element);
        }
    }
    return Data
})

const mousedown = (event, item) => {
    StateEvent.MouseEvent.AddMouseEvent(event, item)
}

</script>

<style lang="less" scoped>
.Content {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    user-select: none;
}

.Item {
    // padding: 16px;

    .ItemTitle {
        font-size: 16px;
        padding-bottom: 8px;
    }

    .ItemBox {
        padding-bottom: 10px;
    }

    .CellItem {
        cursor: pointer;
        border: 1px solid;
        display: flex;
        align-items: center;

        span {
            pointer-events: none;
        }

        .C-Icon {
            margin-right: 3px;
        }
    }
}
</style>